<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet"/>
	<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet"/>
	<link href="../../assets/lib/editormd/css/editormd.css" rel="stylesheet"/>
	<!-- 页面解析markdown为HTML显示需要的css -->
	<link href="../../assets/lib/editormd/css/editormd.preview.min.css" rel="stylesheet"/>
	<style>
        .chat-container {
            display: flex;
            flex-direction: column;
			height: 100%;
            margin-top: 5px;
            padding: 10px;
        }

        .chat-box {
            width: 100%;
            background-color: #fffffc;
            padding: 10px 0px;
            border-radius: 3% 3% 0 0;
			height: calc(100% - 220px);
            overflow-y: auto; /* 允许垂直滚动 */
        }

        .chat-input {
            display: flex;
            position: relative;
            padding: 0 0 10px 0;
        }

        .chat-input textarea {
            flex-grow: 1;
        }

        .chat-input-button {
            position: absolute;
            display: block;
            right: 5px;
            top: 65px;
            justify-content: center;
            border: snow;
            padding: 0px 10px;
        }

        textarea {
            height: 120px;
        }

        .text {
            color: #888888;
        }

        .message-style {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px; /* 消息之间的间距 */
        }

        .message-style .avatar {
            width: 30px;
            height: 30px;
            border-radius: 10%;
            margin: 0 10px 0 5px; /* 头像与文本之间的间距 */
        }

        .message-style .text {
            flex-grow: 1; /* 让文本元素占据剩余空间 */
            margin-left: 10px; /* 可选：给文本一些左边距以与头像分隔 */
            word-wrap: break-word; /* 确保文本会换行 */
            hyphens: auto; /* 自动连字符，改善长单词的换行 */
        }

        /*气泡样式*/
        .message-bubble {
            position: relative;
            background-color: #f0f0f0;
            border-radius: 8px;
            padding: 5px 10px;
            margin-left: 10px;
            max-width: 90%;
            word-wrap: break-word;
            hyphens: auto;
        }

        .more {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
	</style>
</head>
<body>
<div style="padding: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: hidden; flex-direction: column;">
	<ul class="layui-nav layui-bg-green navbar layui-col-md6 layui-col-md-offset3 " lay-filter=""
		style="border-radius:20px;">
		<li class="layui-nav-item layui-this"><a href="javascript:;">讯飞星火</a></li>
		<li class="layui-nav-item"><a href="javascript:;">文心一言</a></li>
		<li class="layui-nav-item"><a href="javascript:;">通义千问</a></li>
		<img id="clear" src="../../assets/images/aichat/clear.png" title="一键清空" style="width: 18px;
    height: 18px;">
	</ul>
	<div class="chat-container layui-col-md6 layui-col-md-offset3">
		<div class="chat-box" id="chat-box">
		</div>
		<div class="chat-input">
			<textarea id="messageInput" class="layui-textarea" placeholder="有什么问题尽管问我"></textarea>
			<button class="layui-btn-radius layui-btn-sm chat-input-button" id="sendMessage">
				<img class="send-img" src="../../assets/images/aichat/send.png">
			</button>
		</div>
		<div class="text">
			内容由AI生成，无法确保真实准确，仅供参考，请遵守《skyeye智能制造用户协议》、《skyeye智能制造个人信息保护规则》，版本：V0.0.1
		</div>
	</div>
</div>

<script type="text/x-handlebars-template" id="beanMessageTemplate">
	{{#this}}
		<div class="message-style">
			<img class="avatar" src="{{avatar}}">
			<div class="message-bubble" id="{{aiId}}">{{content}}</div>
		</div>
	{{/this}}
</script>

<script type="text/x-handlebars-template" id="listMessageTemplate">
	{{#this}}
	<div class="message-style">
		<img class="avatar" src="{{avatar}}">
		<div class="message-bubble" id="{{aiId}}">{{message}}</div>
	</div>
	{{/this}}
</script>

<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script src="../../assets/lib/editormd/js/editormd.js"></script>
<!-- 页面markdown解析成HTML需要的js -->
<script src="../../assets/lib/editormd/lib/marked.min.js"></script>
<script src="../../assets/lib/editormd/lib/prettify.min.js"></script>
<script src="../../assets/lib/editormd/lib/raphael.min.js"></script>
<script src="../../assets/lib/editormd/lib/underscore.min.js"></script>
<script src="../../assets/lib/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../assets/lib/editormd/lib/flowchart.min.js"></script>
<script src="../../assets/lib/editormd/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript">
    layui.config({base: '../../js/aiChat/'}).use('aiChat');
</script>
</body>
</html>